<template>
  <div class="bottom-tab">
    <div class="tab-item" @click="switchTo('/Generalhospital/homepage')">
      <img
        :src="
          '/Generalhospital/homepage' === $route.path
            ? tabBarImgArr[0].selected
            : tabBarImgArr[0].normal
        "
        alt="首页"
      />
      <span :class="{ on: '/Generalhospital/homepage' === $route.path }"
        >首页</span
      >
    </div>
    <div class="tab-item" @click="switchTo('/Generalhospital/Branch')">
      <img
        :src="
          '/Generalhospital/Branch' === $route.path
            ? tabBarImgArr[1].selected
            : tabBarImgArr[1].normal
        "
        alt="分院"
      />
      <span :class="{ on: '/Generalhospital/Branch' === $route.path }"
        >分院</span
      >
    </div>
    <div class="tab-item" @click="switchTo('/Generalhospital/clubcard')">
      <img
        :src="
          '/Generalhospital/clubcard' === $route.path
            ? tabBarImgArr[2].selected
            : tabBarImgArr[2].normal
        "
        alt="会员卡"
      />
      <span :class="{ on: '/Generalhospital/clubcard' === $route.path }"
        >会员卡</span
      >
    </div>
    <div class="tab-item" @click="switchTo('/Generalhospital/curriculum')">
      <img
        :src="
          '/Generalhospital/curriculum' === $route.path
            ? tabBarImgArr[3].selected
            : tabBarImgArr[3].normal
        "
        alt="搜索"
      />
      <span :class="{ on: '/Generalhospital/curriculum' === $route.path }"
        >课程</span
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      tabBarImgArr: [
        //图片切换
        {
          normal: require("../../static/image/gailang1.png"),
          selected: require("../../static/image/gailang.png")
        },
        {
          normal: require("../../static/image/fengyuan1.png"),
          selected: require("../../static/image/fengyuan.png")
        },
        {
          normal: require("../../static/image/lrfour.png"),
          selected: require("../../static/image/lrfive.png")
        },
        {
          normal: require("../../static/image/class.png"),
          selected: require("../../static/image/class1.png")
        }
      ]
    };
  },
  methods: {
    switchTo(path) {
      this.$router.replace(path);
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.bottom-tab {
  width: 100%;
  height: 1rem;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  z-index: 999;
  border-top: 0.02rem solid #ddd;
  .tab-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    color: #666;
    img {
      width: 0.44rem;
      height: 0.44rem;
      margin-bottom: 0.12rem;
    }
    .on {
      color: black;
    }
  }
}
</style>